<template>
    <div>
    <van-form @submit="uploadf">
 
        文件上传<van-uploader :after-read="afterRead" :before-read='beforeRead'/>

  </van-form>
    </div>
  </template>
  
  <script>
import axios from 'axios';


  export default {
    data() {
      return {
        count:0,
        tcount:0,
        filename:'',
        file:'',
        size: '',
      };
    },
    methods: {
      beforeRead(file){
        this.file = file
        this.filename = file.name
        // 计算文件总片数
        this.tcount = Math.ceil(file.size/(1024*1024))
        // 文件大小
        this.size = file.size;
        return true
      },
      async uploadf(data){
         await axios.post('http://127.0.0.1:8000/index/fileupload/', data).then(res=>{
             
          })
      },
      afterRead(file){
          var data = new FormData()
          var start = this.count *(1024*1024)
          var end= (this.count+1)*(1024*1024)
          // 0  1024*1024
          // 1024*1024  2*1024*1024
          // 当前上传的文件流
          data.append("file",this.file.slice(start,end))
          // 文件名
          data.append("filename",this.filename)
          // 一共有多少片
          data.append("tcount",this.tcount)
          // 当前上传的索引
          data.append("count",this.count)
          // 文件大小
          data.append("size", this.size)
         
          this.uploadf(data)
         
          if(this.count == this.tcount-1){
              alert('上传成功')
          }else{
              this.count++
              this.afterRead(file)
          }
      },
      
    },
  };
  </script>
  
  <style>
  
  </style>